<template>
  <header class="order">
    <el-page-header :icon="Coin" style="margin-top: 10px"  @click="toIndex">
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 mr-3">活动信息管理</span>
        </div>
      </template>
    </el-page-header>
  </header>
  <nav style="margin-top: 20px;">
    显示父级表格: <el-switch v-model="parentBorder" />
    显示子级表格: <el-switch v-model="childBorder" />
    <hr>
    <el-button type="primary" plain :icon="Plus">添加</el-button>
    <el-button type="danger" plain :icon="Delete">批量删除</el-button>
    <input type="text" placeholder="请输入搜索内容"
           style="margin-left: 650px;height: 28px" />
    <el-button type="success" plain>全局搜索</el-button>
  </nav>
  <el-table :data="tableData" :border="parentBorder" style="width: 100%;margin-top: 10px;">
    <el-table-column type="expand">
      <template #default="props">
        <div>
          <p>活动代码: {{ props.row.id }}</p>
          <p>活动名称: {{ props.row.name }}</p>
          <p>活动海报:
            <br/>
            <el-image
                style="width: 900px; height: 500px"
                :src="props.row.face"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="4"
                fit="cover" />
          </p>
          <p>活动详情: {{ props.row.comDesc }}</p>
          <h3>活动详细信息</h3>
          <el-table :data="tableData" :border="childBorder">
            <el-table-column label="活动类型" prop="type" />
            <el-table-column label="主办学院" prop="sponsor" />
            <el-table-column label="负责人" prop="username" />
            <el-table-column label="负责人工号" prop="tno" />
            <el-table-column label="负责人电话" prop="telephone" />
            <el-table-column label="负责人邮箱" prop="email" />
            <el-table-column label="开始报名时间" prop="signstartdate" />
            <el-table-column label="结束报名时间" prop="signenddate" />
            <el-table-column label="竞赛开始时间" prop="startdate" />
            <el-table-column label="竞赛结束时间" prop="enddate" />
            <!--<el-table-column label="参与竞赛学生" prop="name" />-->
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="项目立项时间" prop="signstartdate" />
    <el-table-column label="项目名称" prop="name" />
    <el-table-column label="操作" width="100px;">
      <template #default="scope">
        <el-button type="warning" plain :icon="Delete" @click="delActInfoById(scope.row.id)"/>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {ref,onMounted} from "vue";
import {Coin, Delete, Plus, Search} from "@element-plus/icons-vue";
import axios from "axios";
import router from "@/router/index.js";

const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = ref([])
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

/**
 * 查询竞赛信息
 */
const queryActivityInfos =()=>{
  fetch("http://localhost:3000/TbCompetitionActivityController/getCompetitionInfos/002").then(res => res.json().then(res =>{
    tableData.value = res.data;
    console.log(tableData.value)
  }))
}

/**
 * 删除活动信息
 * @param id
 */
const delActInfoById =(id)=>{
  axios.delete(`api/TbCompetitionActivityController/removeCompetitioninfo/${id}`).then(res => {
    console.log(res.data)
    queryActivityInfos();
  })

}

onMounted(()=>{
  queryActivityInfos()
})

const toIndex = () => {
  router.push({
    path: "/RootIndex",
  });
};

</script>
<style scoped>
.order{
  background-color: #F5F7FA;
  margin-top: -10px;
  height: 50px;
  padding-top: 20px;
  padding-left: 20px;
  border-radius: 5px;
}

</style>